<html>
<head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
html, body {
	width: 100%;
	height: 100%;
}
pre{
	
}
</style>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>

<body>

<textarea id="code"  cols="100" rows="200">
	
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
  TouchableHighlight,
  Api,
  A,
  DatePicker,
  Account,
  ActivityIndicator,
  CommonStyle,
  PixelRatio,
  ScrollView,
  Form
} from '../../lib/Common';


import {FormInput,FormSelect,FormSwitch,FormItem} from '../../lib/TemplateForm'
import TitleBar from '../widget/TitleBar'
import Select from '../../lib/Select'
import ImagePicker from '../../lib/ImagePicker'
import RadioButtonGroup from '../widget/RadioButtonGroup'
import LoadingButton from '../widget/LoadingButton'


import {
  radioButton,
  loadingButton,
  loadingButtonDisabled
} from '../GlobalStyle'


<% for(val in selects){ %>
const ${toUpperCase(val.name)}_VALUES = [${getSelectValues(val.extra)}];
const ${toUpperCase(val.name)}_LABELS = [${getSelectLabels(val.extra)}];
<% } %>
const picPlaceHolder = require('../images/s_ic_add_diy.png');

export default class FormView extends Component{

  constructor(props) {
    super(props);
    this.state={};
    this.form = new Form();
  }

  onSuccess=(result)=>{
    console.log(result);
  }
 
  onSubmit=()=>{
    this.form.submit(this,{
      api:'${name}',
      crypt:${crypt},
      success:this.onSuccess
    });
  }

	render(){
		return (
			<ScrollView style={CommonStyle.container}>
		      <TitleBar title="标题" />
          <% for(val in params){ %>
            <% if(val.helperType == 'input' || val.helperType== null || val.helperType== "") {%>
            
<FormInput 
  label="${val.comment}" 
  value={this.state.${val.name}}
  placeholder="请输入${val.comment}" 
  onChange={(${val.name})=>{this.setState({${val.name}})}} />
            <% } %>
            <% if(val.helperType == 'image') {%>
            
<View>
	<Text style={styles.label}>${val.comment}</Text>
	<ImagePicker 
		file={true}
		disabled={this.state.submiting}
		ref="${val.name}"
		placeholder="请选择照片"
		album={false} 
		onChange={(${val.name})=>{this.setState({${val.name}})}}
		>
		<Image 
			resizeMode="contain" 
			style={{alignSelf:'center',width:300,height:100}} 
				source={this.state.${val.name} ?  {uri:this.state.${val.name}} : picPlaceHolder} 
				/>
	</ImagePicker>
</View>
            <% } %>
            
 <% if(val.helperType == 'date') {%>
 <FormItem
    label="${val.comment}"
    ref="${val.name}"
    placeholder="请选择${val.comment}"
    comp={DatePicker}
    value={this.state.${val.name}}
    onChange={(${val.name})=>{this.setState({${val.name}})}}  />
 <%}%>          
            
 <% if(val.helperType == 'select') {
 	var data = val.extra;
 %>
<FormSelect
	label="${val.comment}"
	placeholder="请选择${val.comment}"
	ref="${val.name}"
	values={${toUpperCase(val.name)}_VALUES}
	labels={${toUpperCase(val.name)}_LABELS}
	value={this.state.${val.name}}
	onChange={(index,${val.name})=>{this.setState({${val.name}})}} />
 <%}%>            
            
          <% } %>  
        
          
          

          <LoadingButton 
            loading={this.state.submiting}
            text="提交" 
            onPress={this.onSubmit}
            disabled={this.state.submiting}
            style={this.state.submiting ? loadingButtonDisabled : loadingButton.loadingButton} 
            textStyle={loadingButton.loadingButtonText} />
			</ScrollView>
		);
	}
}


const styles = StyleSheet.create({
  arrow:{width:7,height:12,marginRight:5,marginLeft:5},
  scrollView:{flex:1,backgroundColor:'#F2F2F2'},
  row:{backgroundColor:'#FFFFFF',marginTop:5,height:36,flexDirection:'row',alignItems:'center'},
  inputText:{fontSize:14,flex:1,alignSelf:'center',marginLeft:10},
  inputTextPlaceholder:{color:"#ccc"},
  input:{fontSize:14,flex:1,height:36,marginLeft:10},
  right:{flexDirection:'row',flex:1,marginLeft:10},
  label:{marginLeft:10,fontSize:13,color:'#555555'},
  picLabel:{marginTop:10},
  picContainer:{backgroundColor:'#FFFFFF',marginTop:5}
});

</textarea>

</body>
</html>